<script lang="ts" setup>
import { ref } from 'vue';
import defaultImg from '@/home/assets/home/default.png';
import Popconfirm from '@/home/components/Popconfirm.vue';

const props = defineProps({
  avatar: {
    type: String,
    default: '',
  },

  nickname: {
    type: String,
    default: '',
  },

  replyNickname: {
    type: String,
    default: '',
  },

  time: {
    type: String,
    default: '',
  },

  content: {
    type: String,
    default: '',
  },

  showAction: {
    type: Boolean,
    default: true,
  },

  replyTotal: {
    type: Number,
    default: 0,
  },

  likeTotal: {
    type: Number,
    default: 0,
  },

  isAuthor: {
    type: Boolean,
    default: false,
  },

  isLike: {
    type: Boolean,
    default: false,
  },

  isDelete: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['reply', 'like', 'remove']);

const stickyRemove = ref(false);
</script>

<template>
  <div class="component-comment-post flex gap-x-12">
    <div class="flex-shrink-0">
      <img :data-src="props.avatar || defaultImg" :alt="props.nickname" class="lozad block size-40 border-1 border-#ebebeb rounded-full">
    </div>

    <div class="flex-grow overflow-hidden">
      <div class="flex justify-between gap-x-12">
        <div class="flex-grow overflow-hidden">
          <p class="h-20 text-14 text-#292929 font-semibold leading-20">
            <span class="inline-block max-w-45% truncate break-anywhere">{{ props.nickname }}</span>
            <template v-if="props.replyNickname">
              <span class="ml-8 inline-block truncate text-#8B8B8B font-normal">{{ $t('home.explore.comments.reply') }}</span>
              <span class="ml-8 inline-block max-w-45% truncate">{{ props.replyNickname }}</span>
            </template>
          </p>
          <p class="mt-2 text-12 text-#8B8B8B leading-18">{{ props.time }}</p>
        </div>
        <div class="h-20 flex-y-center flex-shrink-0 rounded-4 bg-#F7F7F7 px-8 text-12 text-#3D7CFA leading-16" v-if="props.isAuthor">
          {{ $t('home.explore.comments.author') }}
        </div>
      </div>

      <div class="group">
        <p class="mt-12 break-anywhere text-16 text-#292929 fw-400">{{ props.content }}</p>

        <template v-if="props.showAction">
          <div class="mt-12 flex-y-center gap-x-20">
            <button type="button" class="h-24 flex-y-center gap-x-8 bg-transparent text-14 text-#8B8B8B leading-24" @click="emit('reply')">
              <span class="i-icons:comment-outlined-2 size-24 text-#575757">{{ $t('home.explore.comments.reply') }}</span>
              <span>{{ props.replyTotal }}</span>
            </button>
            <button type="button" class="h-24 flex-y-center gap-x-8 bg-transparent text-14 text-#8B8B8B leading-24" @click="emit('like')">
              <span class="i-icons:good size-24" :class="[props.isLike ? 'text-#3D7CFA' : 'text-#575757']">{{ $t('home.explore.comments.support') }}</span>
              <span>{{ props.likeTotal }}</span>
            </button>
            <Popconfirm
              :content="$t('home.explore.comments.removeConfirm')"
              @close="stickyRemove = false"
              @ok="emit('remove')"
              v-if="props.isDelete"
            >
              <button
                type="button"
                class="bg-transparent text-14 text-#8B8B8B leading-24 group-hover:(block) not-[.sticky-remove]:(hidden) focus-visible:outline-unset"
                :class="{ 'sticky-remove': stickyRemove }"
                @click="stickyRemove = true"
              >
                {{ $t('home.explore.comments.delete') }}
              </button>
            </Popconfirm>
          </div>

          <slot name="input"></slot>
        </template>
      </div>

      <slot name="child"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
